<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query :searchParam="state.searchParams"
                       @on-search="search"
            />
          </div>
          <!-- 列表 -->
          <pro-table ref="tableRef"
                     :isShowImportAndExport="true"
                     :pagination="pagination"
                     :fetch="fetch"
                     :columns="state.columns"
                     :operate="state.operate"
                     :param="state.param"
                     :toolbar="toolbar"
                     :operationWidth="operationWidth"
                     :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          />
        </a-card>
      </a-col>
    </a-row>
    <importModal
      :exportConfig="exportConfig"
      :visible="state.importVisible"
      @close="closeImport"></importModal>
  </page-layout>
</template>

<script setup>
import { message, Modal } from 'ant-design-vue'
import { page, remove, templateUrl, imports } from '@/api/module/courseBaseInfo'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import useTable from '@/controller/useTable'
import importModal from '@/component/import/index.vue'
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const tableRef = ref(null)
const router = useRouter()

const exportConfig = reactive({
  title: '学校管理',
  exportExcel: imports,
  templateUrl: templateUrl,
  downMethod: 'GET',
  fileName: '学校管理导入模板',
  params: {}
})

const goNewSchool = () => router.push('/university/course-outline/add')

const toolbar = [
  {
    code: '',
    label: '新增',
    type: 'primary',
    event: (selectedRowKeys) => {
      goNewSchool()
    }
  },
  {
    code: "",
    label: t('button.batchImport'),
    type: "",
    event: (selectedRowKeys) => {
      handleExport();
    },
  },
]
const operationWidth = 200

const handleExport = () => {
  // state.importVisible = true
};
const closeImport = (value) => {
  state[value] = false
  tableRef.value.reload()
}
const { search, fetch, pagination, state } = useTable(
  page,
  [
    { dataIndex: "courseName", key: "courseName", title: "课程名称", ellipsis: true },
    { dataIndex: "courseCode", key: "courseCode", title: "课程代码", ellipsis: true },
    { dataIndex: "createTime", key: "createTime", title: "创建时间", ellipsis: true },
  ],
  [
    {
      label: "详情",
      event: item => router.push({
        path: '/university/course-outline/detail',
        query: { id: item.id }
      })
    },
    {
      label: "编辑",
      event: item => router.push({
        path: '/university/course-outline/edit',
        query: { id: item.id }
      })
    },
    {
      label: "删除",
      event: item => {
        Modal.confirm({
          title: '删除',
          content: '是否删除此项？',
          okText: '是',
          okType: 'danger',
          cancelText: '否',
          onOk() {
            remove({ id: item.id }).then(res => {
              if (res.code === 500) return message.error('删除失败')
              message.success('删除成功')
              tableRef.value.fetch({ current: 1 })
            })
          },
        })
      }
    }
  ],
  [
    { span: 4, key: "courseName", type: "input", label: "项目名称", placeholder: '请输入' },
    { span: 4, key: "courseCode", type: "input", label: "学期", placeholder: '请输入' },
    { span: 4, key: "courseCode", type: "input", label: "课程", placeholder: '请输入' },
    { span: 4, key: "courseCode", type: "input", label: "教授", placeholder: '请输入', hidden: true },
    { span: 4, key: "courseCode", type: "input", label: "TA", placeholder: '请输入', hidden: true },
    {
      span: 4,
      key: "createTime",
      type: "rangeTime",
      label: "创建时间",
      keys: ['startTime', 'endTime'],
      placeholder: ["请选择开始时间", "请选择结束时间"],
      showTime: { format: "YYYY-MM-DD HH:mm:ss" },
      format: "YYYY-MM-DD HH:mm:ss",
      hidden: true
    },
    { span: 4, key: "courseCode", type: "input", label: "创建人", placeholder: '请输入', hidden: true },
  ]
)
</script>
